<template>
    <div class="Release">
      <el-row class="body">
        <el-col :span="16" class="left">
          <h4><i class="el-icon-plus"></i>发起</h4>
          <el-divider></el-divider>
          <div class="title">
            <p>问题标题(简单概要)</p>
            <el-input v-model="form.title"></el-input>
          </div>
          <mavon-editor v-model="form.content[0]"
                        ref="md" @change="change"
                        placeholder="请输入问题描述..."
                        :boxShadow="true"
                         style="min-height: 600px" />
          <div class="tag">
            <p>我的标签</p>
            <div class="choosed">
              <el-tag
                :key="index"
                v-for="(tag,index) in form.tags"
                closable
                @close="handleClose(tag)">
                {{tag}}
              </el-tag>
            </div>
            <p>可选标签</p>
            <div class="choose">
              <el-tag
                :key="index"
                v-for="(tag,index) in tagsToBe"
                @click="handleClick(tag)"
                >
                {{tag}}
              </el-tag>
              <el-input
                class="input-new-tag"
                v-if="inputVisible"
                v-model="inputValue"
                ref="saveTagInput"
                size="small"
                @keyup.enter.native="handleInputConfirm"
                @blur="handleInputConfirm"
              >
              </el-input>
              <el-button v-else class="button-new-tag" size="small" @click="showInput">+自定义标签</el-button>
            </div>
          </div>
          <el-button type="success" @click="onsubmit">发布</el-button>
        </el-col>
        <el-col :span="8" class="right">
          <h4>问题发起指南</h4>
          <div class="desc">
            <p>-问题描述：请用精简的语言描述您发布的问题，不超过25字；</p>
            <p>-问题补充：详细补充您的问题，并确保问题描述清晰直观，并提供一些相关的资料；</p>
            <p>-选择标签：请选择一个或者多个适合的标签；</p>
          </div>
        </el-col>
      </el-row>
    </div>
</template>

<script>
  import { mavonEditor } from 'mavon-editor'
  import 'mavon-editor/dist/css/index.css'

  import {mapState} from 'vuex';
    export default {
        name: "Release",
        data() {
            return {
              form:{
                title:'',
                content:[], // 输入的markdown,
                tags:[]
              },
              tagsToBe:["java","js","python","shell","c/c++","html5","css",],
              inputVisible: false,
              inputValue: ''
            }
        },
        computed:{
          ...mapState(["token"]),
        },
        methods: {
          change(value, render) {
            this.form.content=value;
          },
          onsubmit(){
            console.log(this.form);
            console.log(this.token);
            this.$axios({
              url:'http://47.92.167.153:8085/community/publish',
              method:'post',
              data:{
                data:this.form,
                token:this.token
              }
            }).then((res)=>{
              res=res.data;
              if(res.success){
                this.$router.push({name:'Community'});
                this.$notify({
                  title: '成功',
                  message: "发布成功了呀~",
                  type: 'success'
                });
              }else{
                this.$notify({
                  title: '警告',
                  message: res.msg,
                  type: 'warning'
                });
              }
            }).catch(function(error){
              console.log(error)
            });
          },
          handleClose(tag) {
            this.form.tags.splice(this.form.tags.indexOf(tag), 1);
          },
          handleClick(tag){
            this.form.tags.push(tag);
          },
          showInput() {
            this.inputVisible = true;
            this.$nextTick(_ => {
              this.$refs.saveTagInput.$refs.input.focus();
            });
          },

          handleInputConfirm() {
            let inputValue = this.inputValue;
            if (inputValue) {
              this.tagsToBe.push(inputValue);
            }
            this.inputVisible = false;
            this.inputValue = '';
          }
        },
        components:{
          mavonEditor,
        }
    }
</script>

<style scoped lang="stylus">
.Release
  margin-top 70px
  padding 35px
  background #F6F6F6
  .body
    background #fff
    .right
      padding 15px
      >h4
        font-size 30px
        text-align center
      .desc
        >p
          margin-top 20px
          font-size 15px
    .left
      padding 15px
      >h4
        font-size 30px
        .el-icon-plus
          font-size 30px
          font-weight: bolder
      .tag
        margin-top 20px
        >p
          font-size 15px
          font-weight: 600
          margin-bottom: 10px
        .choosed
          height 32px
          margin-bottom: 10px;
          .el-tag
            margin-right 10px
        .choose
          height 32px
          .el-tag
            margin-right 10px
            float left
            cursor pointer
          .button-new-tag
            margin-left: 10px;
            height: 32px;
            line-height: 30px;
            padding-top: 0;
            padding-bottom: 0;
            float left
          .input-new-tag
            width: 90px;
            margin-left: 10px;
            vertical-align: bottom;
            float left
      .title
        >p
          font-size 15px
          font-weight: 600
          margin-bottom: 10px
      .el-input
        margin-bottom 20px
      .markdown-body
        z-index 1
      .el-button
        float right
</style>
